<template>
    <div class="layout-route" v-loading="loading">
        <div class="detail-card">
            <div class="detail-title">达人基础信息</div>
            <div class="detail-base">
                <div class="detail-base-item">
                    <div class="detail-base-item-title">🎇达人ID：</div>
                    <div class="detail-base-item-content">{{ person_info.expert_id }}</div>
                </div>
                <div class="detail-base-item">
                    <div class="detail-base-item-title">👨🏿‍🤝‍👨🏿handle：</div>
                    <div class="detail-base-item-content">{{ person_info.expert_name }}</div>
                </div>
                <div class="detail-base-item">
                    <div class="detail-base-item-title">🎪平台：</div>
                    <div class="detail-base-item-content">
                        <div style="display: flex;">
                            <el-image
                                v-for="(item, index) in platformIdList" :key="index"
                                style="width: 50px; cursor: pointer; margin-right: 4px"
                                :src="item | formatLabelByValueFuzzy(platformType, { label: 'icon' })"
                                @click="toNewPage(linkList[index])"
                            ></el-image>
                        </div>
                    </div>
                </div>
                    <div class="detail-base-item">
                        <div class="detail-base-item-title">👨负责人：</div>
                        <div class="detail-base-item-content">{{ person_info.operator }}</div>
                    </div>
                <div class="detail-base-item">
                    <div class="detail-base-item-title">📫邮箱：</div>
                    <div class="detail-base-item-content">
                        <el-link type="primary" target="_blank">{{ person_info.email }}</el-link>
                    </div>
                </div>
                <div class="detail-base-item">
                    <div class="detail-base-item-title">📞电话：</div>
                    <div class="detail-base-item-content">{{ person_info.kol_phone }}</div>
                </div>
                <div class="detail-base-item">
                    <div class="detail-base-item-title">🏢合作店铺：</div>
                    <div class="detail-base-item-content">{{ person_info.shop_name }}</div>
                </div>
                <div class="detail-base-item">
                    <div class="detail-base-item-title">💲合作价格：</div>
                    <div class="detail-base-item-content">{{ person_info.cooperate_price }}</div>
                </div>
                <div class="detail-base-item">
                    <div class="detail-base-item-title">👝合作记录：</div>
                    <div class="detail-base-item-content">{{ person_info.cooperate_nums }}次</div>
                </div>
                <div class="detail-base-item">
                    <div class="detail-base-item-title">🎏品类：</div>
                    <div class="detail-base-item-content">{{ person_info.cooperate_spu }}</div>
                </div>
                <div class="detail-base-item">
                    <div class="detail-base-item-title">🏳‍🌈标签：</div>
                    <div class="detail-base-item-content">{{ person_info.tags }}</div>
                </div>
                <div class="detail-base-item">
                    <div class="detail-base-item-title">🎈级别：</div>
                    <div class="detail-base-item-content">{{ person_info.level | formatLabelByValueFuzzy(COOPERATION_LEVEL) }}</div>
                </div>
            </div>
        </div>
        <!-- <div class="detail-card">
            <div class="detail-title">达人素材</div> -->
            <!-- // 视频 需支持横向滚动 一屏4个视频 每一个视频的间距12px -->
            <!-- <div class="detail-videos detail-base">
                <div class="detail-video" v-for="item in video_info" :key="item.id">
                    <video :src="item" autoplay muted controls></video>
                </div>
            </div>
        </div> -->
    </div>
</template>

<script>
import { getPersonList } from '@/api/expert'
import InstagramEmbed from 'vue-instagram-embed'
import { PLATFORM_TYPE, COOPERATION_LEVEL } from '../constant'
export default {
    name: 'ExpertDetail',
    components: {
        InstagramEmbed,
    },
    data() {
        return {
            person_info: {},
            video_info: [],
            loading: false,
            siteList: [],
            COOPERATION_LEVEL,
            platformType: PLATFORM_TYPE,
        }
    },
    computed: {
        linkList() {
            return this.person_info.link ? JSON.parse(this.person_info.link || '[]') : []
        },
        platformIdList() {
            return this.person_info.platform_id?.split(',') ?? []
        },
    },
    created() {
        this.getDetail()
    },
    methods: {
        toNewPage(url) {
            window.open(url, '_blank')
        },
        getDetail() {
            this.loading = true
            getPersonList({ expert_id: this.$route.query.expert_id })
                .then(res => {
                    this.person_info = res.data.person_info
                    this.video_info = res.data.video_info
                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>

<style lang="scss" scoped>
.detail-card {
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(214, 219, 226, 0.5), 0 1px 2px rgba(214, 219, 226, 0.5);
    margin-bottom: 24px;
}
.detail-title {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    background-color: #f6f7f9;
    padding: 0.625rem 1.25rem;

    font-size: 16px;
    font-weight: 500;
    // height: 28px;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
}
.detail-base {
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    padding: 1.25rem;
    .detail-base-item {
        display: flex;
        align-items: center;
        padding: 0.75rem 0.75rem;
        font-size: 14px;
        line-height: 1.5;
        &:nth-child(2n-1) {
            background: #f6f7f9;
        }
        .detail-base-item-title {
            font-weight: normal;
            width: 90px;
            color: #999;
        }
        .detail-base-item-content {
            font-weight: normal;
            padding-left: 4px;
        }
    }
}
.detail-videos {
    display: flex;
    flex-wrap: wrap;
    // overflow-x: auto;
    .detail-video {
        width: 25%;
        padding: 0 4px;
        iframe,
        video {
            width: 100%;
            height: 240px;
        }
    }
}
</style>
